<template>
	<view
	  class="loading-icon custom-class"
		:class="{'reverse': reverse}"
		:style="{'width': size, 'height': size}"
	>
	  <view
	    class="loading-icon__spinner"
			:class="'loading-icon__spinner--'+ type"
			:style="{'color': color, 'border-width': border}"
	  >
	    <view
				v-if="type === 'spinner'"
				v-for="(item, index) in 12"
	      :key="index"
	      class="loading-icon__dot"
	    ></view>
	  </view>
	</view>
</template>

<script>
	export default {
		name: 'componentLoading',
		props: {
			size: {
				type: String,
				default: '16px'
			},
			type: {
				type: String,
				default: 'circular'
			},
			color: {
				type: String,
				default: '#c9c9c9'
			},
			border: {
				type: String,
				default: '2px'
			},
			reverse: Boolean
		}
	}
</script>

<style scoped lang="scss">
	.loading-icon {
	  z-index: 0;
	  line-height: 0;
	  vertical-align: middle;
		position: relative;
		display: inline-block;
		.loading-icon__spinner {
		  position: relative;
		  display: inline-block;
			z-index: -1;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			animation: van-rotate 1s linear infinite;
			&.loading-icon__spinner--spinner {
				animation-timing-function: steps(12);
				.loading-icon__dot {
				  top: 0;
				  left: 0;
				  width: 100%;
				  height: 100%;
				  position: absolute;
					&:before {
					  width: 2px;
					  height: 25%;
					  content: " ";
					  display: block;
					  margin: 0 auto;
					  border-radius: 40%;
					  background-color: currentColor
					}
					&:first-of-type {
					  opacity: 1;
					  transform: rotate(30deg)
					}
					&:nth-of-type(2) {
						opacity: .9375;
						transform: rotate(60deg)
					}
					&:nth-of-type(3) {
						opacity: .875;
						transform: rotate(90deg)
					}
					&:nth-of-type(4) {
						opacity: .8125;
						transform: rotate(120deg)
					}
					&:nth-of-type(5) {
						opacity: .75;
						transform: rotate(150deg)
					}
					&:nth-of-type(6) {
						opacity: .6875;
						transform: rotate(180deg)
					}
					&:nth-of-type(7) {
						opacity: .625;
						transform: rotate(210deg)
					}
					&:nth-of-type(8) {
						opacity: .5625;
						transform: rotate(240deg)
					}
					&:nth-of-type(9) {
						opacity: .5;
						transform: rotate(270deg)
					}
					&:nth-of-type(10) {
						opacity: .4375;
						transform: rotate(300deg)
					}
					&:nth-of-type(11) {
						opacity: .375;
						transform: rotate(330deg)
					}
					&:nth-of-type(12) {
						opacity: .3125;
						transform: rotate(1turn)
					}
				}
			}
			&.loading-icon__spinner--circular {
			  border-radius: 100%;
			  border: 6px solid transparent;
			  border-top-color: initial;
				border-left-color: initial;
			}
		}
		&.reverse {
			.loading-icon__spinner {
				animation: van-rotate-reverse 1s linear infinite;
			}
		}
	}
	
	@keyframes van-rotate {
	  0% {
			opacity: .4;
	    transform: rotate(0deg)
	  }
		
		50% {
			opacity: 1;
		}
	
	  to {
			opacity: .4;
	    transform: rotate(1turn)
	  }
	}
	
	@keyframes van-rotate-reverse {
	  0% {
			opacity: .4;
	    transform: rotate(360deg)
	  }
		
		50% {
			opacity: 1;
		}
	
	  to {
			opacity: .4;
	    transform: rotate(-1turn)
	  }
	}
</style>
